<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>组织设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search_block">
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i class="el-icon-search"></i> 筛选查询
                        </template>
                        <el-row>
                            <el-col :span="2" class="pleft">
                                <span>输入搜索：</span>
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="search_input" placeholder="组织名称/代码"></el-input>
                            </el-col>
                            <el-col :span="2" class="ml10">
                                <el-button type="primary" @click="queryList">查询结果</el-button>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="list_block">
                <div class="list_title clearfix">
                    <div class="list_l">
                        <i class="el-icon-tickets"></i>
                        <span>数据列表</span>
                    </div>
                    <div class="list_r">
                        <el-button @click="addDepart">添加</el-button>
                        <!-- <el-select v-model="showNum" placeholder="显示条数" disabled size="mini">
                            <el-option
                                v-for="item in showNumOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                        <el-select v-model="orderType" placeholder="排序方式" disabled size="mini">
                            <el-option
                                v-for="item in orderTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select> -->
                    </div>
                </div>
                <el-table
                    :data="depList"
                    border
                    v-loading="loading"
                    style="width:100%"
                >
                    <el-table-column
                        prop="orgCode"
                        label="组织代码"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="orgName"
                        label="组织名称"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        prop="orgDesc"
                        label="组织描述"
                        sortable
                    ></el-table-column>
                    <!-- <el-table-column
                        label="成员数量"
                        sortable
                    >
                        <template slot-scope="scope">
                            <a @click="handleNum(scope)">{{scope.row.userNum}}</a>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        prop="createTime"
                        label="添加时间"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        label="是否启用"
                    >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.openFlag" @change="changeSwitch($event,scope)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <a @click="edit(scope)" class="mr20">编辑</a>
                            <a @click="deleteRow(scope)">删除</a>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page_container">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="threadNum"
                        layout="total, prev, pager, next, jumper"
                        :total="totleNum">
                    </el-pagination>                    
                </div>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>组织代码：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="orgCode"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>组织名称：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="orgName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>职能描述：</span></el-col>
                    <el-col :span="15">
                        <el-input type="textarea" v-model="orgDesc" autosize></el-input>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editDepartment()" :loading="btnloading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
           currentPage:1,
           loading: false,
           btnloading: false,
           activeNames: ['1'],
           search_input: "",
           showNum:"",
           showNumOptions: [{
               value: "5",
               label: '显示5条'
           },{
               value: "10",
               label: '显示10条'
           }],
           orderTypeOptions: [{
               value: "1",
               label: '正序'
           },{
               value: "-1",
               label: '倒序'
           }],
           orderType:"",
           dialogVisible: false,
           //添加组织字段
           orgName: "",
           orgDesc:"",
           orgCode:"",
           rowId: null,
           //存在本地的每页条数
           threadNum: parseInt(localStorage.getItem('pagesize')),
           //弹出框的标题
           dialogTitle:""
        }
    },
    computed: mapState({
        msg: state => state.depart.msg,
        verifyCode: state => state.depart.verifyCode,
        depList(state) {
            let arr = [];
            state.depart.depList.map((item) => {
                item.createTime = item.createTime ? this.formatDate(item.createTime):'';
                item.userNum = item.userNum == null ? 0:item.userNum;
                arr.push(item);
            });
            return arr;
        },
        totleNum: state => state.depart.totleNum
    }),
    methods: {
        handleNum(scope) {
            this.$router.push({ name:'userset', params: {orgId:scope.row.rowId}}) 
        },
        handleCurrentChange(val) {
            this.$store.dispatch('getDepList',{
                pageNo: val,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            })
        },
        formatDate(d) {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return new Date(parseInt(d)).toLocaleString({hour12:false});
            }else if(navigator.userAgent.indexOf('Edge') > -1) {
                return new Date(parseInt(d)).toLocaleString({hour12:false});
            }else{
                return new Date(parseInt(d)).toLocaleString('chinese',{hour12:false});
            }
        },
        edit(scope) {
            this.dialogVisible = true;
            this.dialogTitle = "组织编辑";
            this.orgName = scope.row.orgName;
            this.orgDesc = scope.row.orgDesc;
            this.orgCode = scope.row.orgCode;
            this.rowId = scope.row.rowId;
        },
        deleteRow(scope) {
            this.$confirm('确定删除？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(scope.row.userNum != 0) {
                    this.$message('该组织下有成员，不允许删除！');
                }else{
                    this.$store.dispatch('delDep',{
                        sessionId: localStorage.getItem('sessionId'),
                        contentId: scope.row.rowId
                    }).then(() => {
                        if(this.msg == "删除成功") {
                            this.$message(this.msg);
                            this.getDepartList();
                        }else{
                            this.$message(this.msg);
                        }
                    })
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        addDepart() {
            this.orgCode = "";
            this.orgName = "";
            this.orgDesc = "";
            this.rowId = null;
            this.dialogTitle = "添加组织";
            this.dialogVisible = true;
        },
        //编辑及新建组织
        editDepartment() {
            if(this.orgName == "") {
                this.$message('请输入组织名称');
            }else if(this.orgDesc == '') {
                this.$message('请输入组织描述');
            }else if(this.orgCode == '') {
                this.$message('请输入组织代码');
            }else{
                this.btnloading = true;
                this.$store.dispatch('createDepart',{
                    orgName: this.orgName,
                    orgDesc: this.orgDesc,
                    orgCode: this.orgCode,
                    rowId: this.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    if(this.msg == "保存成功") {
                        this.$message(this.msg);
                        this.btnloading = false;
                        this.dialogVisible = false;
                        this.getDepartList();
                    }else{
                        this.btnloading = false;
                        this.$message(this.msg);
                    }
                })
            }
        },
        //获取组织列表
        getDepartList(key) {
            this.$store.state.depart.depList = [];
            this.loading = true;
            this.$store.dispatch('getDepList',{
                pageSize: this.threadNum,
                searchKey: key,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                if(this.msg !== '成功') {
                    this.loading = false;
                    this.$message(this.msg)
                }else{
                    this.loading = false;
                }
            })
        },
        //查询列表
        queryList() {
            this.getDepartList(this.search_input);
        },
        //开启及关闭
        changeSwitch(event,scope) {
            if(event == true) {
                this.$store.dispatch('openDep',{
                    contentId: scope.row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.$message(this.msg);
                })
            }else{
                this.$store.dispatch('closeDep',{
                    contentId: scope.row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.$message(this.msg);
                })
            }
        }
    },
    mounted() {
        this.getDepartList();
    }
}
</script>
<style scoped>
.search_block >>> .el-collapse-item__header{
    padding: 0 15px;
    border: 1px solid #ebeef5;
    border-top: none;
    background-color:#eee;
}
.search_block >>> .el-collapse-item__content{
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-top: none;
    padding-top: 20px;
    padding-bottom: 20px;
}
.pleft{
    margin-left:1px;
}
.list_block{
    margin-top: 10px;
}
.list_l{
    float: left;
}
.list_title{
    height: 48px;
    line-height: 48px;
    background-color: #eee;
    padding: 0 15px;
    font-size: 13px;
}
.list_r{
    float: right;
}
.el-table .cell {
    height: 23px;
}
.mr20{
    margin-right: 20px;
}
.el-table th>.cell{
    height: 22px;
}
.el-table .cell{
    height: 22px;
}
</style>


